// 实现图片懒加载

// 引入 vueuse
import { useIntersectionObserver } from '@vueuse/core';

export const lazyPlugin = {
    install(app) {
        // 自定义指令，实现懒加载
        app.directive("img-lazy",{
            // 指令的钩子函数，mounted ==> inserted
            // el：绑定的 元素
            // binding：绑定关系。binding.value：指令等号后边的值
            mounted(el,binding) {
                /**
                 * el：监听对象
                 * isIntersection：是否出现
                 */
                const {stop} = useIntersectionObserver(el,([{isIntersecting}])=>{
                    if(isIntersecting) {
                        el.src = binding.value;
                        stop(); // 停止监听
                    }
                })
            }
        })
    }
}